<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							小米众筹
						</view>
						<view class="app-header-right"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="crowdfunding-index">
			<view class="crowdfunding-home">
				<view class="crowd-list-wrap">
					<view class="no-data">
						<image src="https://m.mi.com/static/img/no-data.d17b3f0ba3.png" mode=""></image>
						<view class="no-data-text">
							暂无新的众筹项目，敬请期待
						</view>
					</view>
				</view>
				<view class="past-crowd el-flex">
					<view class="past-crowd-btn">
						查看往期众筹
					</view>
				</view>
				<view class="recommend-wrap">
					<view v-for="(item,index) in labelList" :key="index">
						<view class="item-wrap">
							<view class="recommend-title-wrap">
								<view class="recommend-title">
									{{item.label_name}}
								</view>
								<view class="more" @click="toCrowdfundingDetail(item.id)">
									<text>更多</text>
								</view>
							</view>
							<view class="list">
								<view class="ul wrap">
									<block v-for="(child,childIndex) in item.recommend_products" :key="childIndex">
										<view class="li" @click="toShopDetail(child.product_id)">
											<view class="img-wrap">
												<LazyLoad :src="child.img_url" borderRadius='0.08rem' width=' 1.97rem'
													height=' 1.97rem'></LazyLoad>
												<view class="detail">
													<view class="desc text-ellipsis">
														{{child.name}}
													</view>
													<view class="price-wrap">
														<view class="price">
															￥{{child.price_min}}
														</view>
													</view>
												</view>
											</view>
										</view>
									</block>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	export default {
		data() {
			return {
				labelList: []
			};
		},
		components: {
			LazyLoad
		},
		methods: {
			toCrowdfundingDetail(id) {
				uni.navigateTo({
					url: `/navPage/crowdfundingDetail/crowdfundingDetail?id=${id}`
				})
			},
			toShopDetail(product_id) {
				if (product_id) {
					uni.navigateTo({
						url: `/subPage/proddetail/proddetail?id=${product_id}`
					})
				}
			},
			Back() {
				uni.navigateBack(-1)
			},
			getRecommendLabel() {
				this.$request.get('/getRecommendLabel').then((res) => {
					this.labelList = res.data.data.labels
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad() {
			this.getRecommendLabel()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.header {
		height: .95rem;

		.header-bar {
			height: 100%;
			background-color: rgb(255, 255, 255);

		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);
			}
		}
	}

	.crowdfunding-index {
		background: #fff;
		color: #3c3c3c;
		padding-top: .96rem;

		.crowdfunding-home {
			background: #f5f5f5;

			.crowd-list-wrap {
				position: relative;

				.no-data {
					text-align: center;

					background: #f2f2f2;

					image {
						width: 2.8rem;
						height: 2.8rem;
						margin: 0.54rem 0 0.24rem;
					}

					.no-data-text {
						font-size: .24rem;
						color: rgba(0, 0, 0, .54);
					}
				}
			}

			.past-crowd {
				height: 1.49rem;
				line-height: 1.49rem;
				background-color: #f2f2f2;

				.past-crowd-btn {
					display: inline-block;
					width: 2.92rem;
					overflow: hidden;
					height: 0.78rem;
					line-height: .78rem;
					border-radius: 0.39rem;
					background: #fff;
					color: rgba(0, 0, 0, .54);
					text-align: center;
					font-size: .28rem;
					border: 1px solid rgba(0, 0, 0, .15);
				}
			}

			.recommend-wrap {
				text-align: left;
				font-size: .28rem;
				overflow: hidden;

				.item-wrap {
					margin-top: 0.48rem;

					.recommend-title-wrap {
						margin-bottom: 0.2rem;
						padding: 0 0.23rem;
						justify-content: space-between;
						align-items: center;
						display: flex;
						flex-wrap: nowrap;

						.recommend-title {
							font-size: .32rem;
							font-weight: 700;
							color: rgba(0, 0, 0, .87);
							background-color: #f2f2f2;
						}

						.more {
							position: relative;

							text {
								font-size: .24rem;
								color: #9b9b9b;
								padding-right: 0.35rem;
							}

							&:after {
								width: 0.12rem;
								height: 0.12rem;
								opacity: .6;
								right: 0.12rem;
								content: "";
								position: absolute;
								top: 50%;
								border-left: 1px solid currentColor;
								border-top: 1px solid currentColor;
								transform: translate3d(0, -50%, 0) rotate(135deg);
							}
						}
					}

					.list {
						margin: 0 0.24rem;
						margin-bottom: 0.21rem;

						.ul {
							flex-wrap: wrap;
							display: flex;
							flex: 1 1 auto;

							background: #fff;
							padding: 0.24rem;
							border-radius: 0.16rem;

							.li {
								width: 1.97rem;
								margin-bottom: 0.38rem;
								margin-right: 0.16rem;

								&:nth-of-type(3n) {
									margin-right: 0;
								}

								.img-wrap {

									image {
										width: 1.97rem;
										height: 1.97rem;
										border-radius: 0.08rem;
									}

									.detail {
										margin-top: 0.24rem;
										margin-left: 0.07rem;
										color: rgba(0, 0, 0, .87);

										.desc {
											max-width: 3.04rem;
											text-align: center;

										}

										.price-wrap {
											margin-top: 0.16rem;
											text-align: center;

											.price {
												color: #ff5934;
												font-weight: 700;
												font-size: .32rem;
												position: relative;
												line-height: 1em;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>